<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="roboNavigatorStyles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="roboNavigator.js"></script>
        <title>Robot Navigator</title>
    </head>
    <body onload="init();">
        <h1 style="text-align: center">Robot Navigator</h1>

        <div style="border:1px solid #c3c3c3;">

            <div style="float: left; margin: 12px 12px 12px 12px; display: inline-block">

                <table>
                    <tbody>
                        <tr>
                            <td><img id="goalIcon" src="goal.png" alt="Goal" width="48" height="48"></td>
                            <td class="nameCell">X</td>
                            <td><input id="goalX" type="number" value="0"/></td>
                            <td class="nameCell">Y</td>
                            <td><input id="goalY" type="number" value="0"/></td>
                            <td><input id="goalApplyButton" type="button" value="Apply" onclick="goalApplyData();"/></td>
                        </tr>
                        <tr>
                            <td rowspan="2"><img id="obstacleIcon" src="obstacle.png" alt="Obstacle" width="48" height="48"></td>
                            <td class="nameCell">X</td>
                            <td><input id="obstacleX" type="number" value="0"/></td>
                            <td class="nameCell">Y</td>
                            <td><input id="obstacleY" type="number" value="0"/></td>
                            <td rowspan="2"><input id="obstacleApplyButton" type="button" value="Apply" onclick="obstacleApplyData();"/></td>
                        </tr>
                        <tr>
                            <td class="nameCell">Vx</td>
                            <td><input id="obstacleVx" type="number" value="0"/></td>
                            <td class="nameCell">Vy</td>
                            <td><input id="obstacleVy" type="number" value="0"/></td>
                        </tr>
                        <tr>
                            <td rowspan="2"><img id="robotIcon" src="robot.png" alt="Robot" width="48" height="48"></td>
                            <td class="nameCell">X</td>
                            <td><input id="robotX" type="number" value="0"/></td>
                            <td class="nameCell">Y</td>
                            <td><input id="robotY" type="number" value="0"/></td>
                            <td rowspan="2"><input id="robotApplyButton" type="button" value="Apply" onclick="robotApplyData();"/></td>
                        </tr>
                        <tr>
                            <td class="nameCell">Vmax</td>
                            <td><input id="robotVmax" type="number" value="0"/></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

                <table>
                    <tbody>
                        <tr>
                            <td>Goal Potential</td>
                            <td><input id="uG" type="number"/></td>
                        </tr>
                        <tr>
                            <td>Obstacle Potential</td>
                            <td><input id="uO" type="number"/></td>
                        </tr>
                        <tr>
                            <td>Vel: Field Potential</td>
                            <td><input id="uV" type="number"/></td>
                            <td><input id="applyForcesButton" type="button" value="Apply" onclick="applyForces();"/></td>
                        </tr>
                    </tbody>
                </table>

                <table>
                    <tbody>
                        <tr>
                            <td>Obstacle</td>
                            <td class="nameCell">X</td>
                            <td class="displayCell"><div id="obsXDynCell"></div></td>
                            <td class="nameCell">Y</td>
                            <td class="displayCell"><div id="obsYDynCell"></div></td>
                        </tr>
                        <tr>
                            <td>Robot</td>
                            <td class="nameCell">X</td>
                            <td class="displayCell"><div id="robotXDynCell"></div></td>
                            <td class="nameCell">Y</td>
                            <td class="displayCell"><div id="robotYDynCell"></div></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="nameCell">Vx</td>
                            <td class="displayCell"><div id="robotVxDynCell"></div></td>
                            <td class="nameCell">Vy</td>
                            <td class="displayCell"><div id="robotVyDynCell"></div></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="nameCell">Xo</td>
                            <td class="displayCell"><div id="robotXoDynCell"></div></td>
                            <td class="nameCell">Yo</td>
                            <td class="displayCell"><div id="robotYoDynCell"></div></td>
                        </tr>
                    </tbody>
                </table>

                <table>
                    <tbody>
                        <tr>
                            <td>Start Time (ms)</td>
                            <td><input id="startTime" type="number"/></td>
                        </tr>
                        <tr>
                            <td>End Time (ms)</td>
                            <td><input id="endTime" type="number"/></td>
                        </tr>
                        <tr>
                            <td>Time Step (ms)</td>
                            <td><input id="stepTime" type="number" min="100"/></td>
                            <td><input id="stepButton" type="button" value="Step" onclick="goStep();"/></td>
                            <td><input id="startButton" type="button" value="Start" onclick="start();"/></td>
                            <td><input id="resetButton" type="button" value="Reset" onclick="resetValues();"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="margin: 12px 12px 12px 36px; display: inline-block">
                <canvas id="grid" width="600" height="600" style="border:1px solid #c3c3c3;">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
            </div>
        </div>
    </body>
</html>
